<!--
  Generated template for the SearchPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header class="bar-header" no-shadow no-border>
  <ion-navbar color="twitter">
    <!-- <ion-searchbar id="search-bar" (ionInput)="ionInput($event)" placeholder='search'></ion-searchbar> -->
    <div style="background-color:white;border-radius:4px;width:80%; height:34px;float: left;">
        <ion-icon name="search" icon-only class="icon-search"></ion-icon>
        <ion-input type="search" name='search' placeholder="请输入关键字 " class="input-search" #searchInput id='search_input' (ionChange)="onchange($event)" (keyup)="onSearchKeyUp($event)"></ion-input>
    </div>
    <div class="search-btn" (click)="onSearch()">搜索</div>
    <!-- <ion-buttons slot="start" style="background-color:white;border-radius:4px;width:80%;">
      <button ion-button icon-start color="dark">
        <ion-icon name="search"></ion-icon>
        <ion-input type="text" placeholder="请输入关键字 " class="input-search"></ion-input>
      </button>
    </ion-buttons> -->
  </ion-navbar> 
</ion-header>

<ion-content>
  <!-- <ion-refresher (ionRefresh)="doRefresh($event)" [enabled]="isAtTop" *ngIf="isAtTop">
      <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在加载中..."></ion-refresher-content>
  </ion-refresher> -->
  <ion-list style="padding-right:16px;">  
    <ion-item *ngFor="let item of listData" (click)="openArticles($event, item.url)">  
      <div *ngIf="item.type == 1 && item.video != 1" class="div-list">
        <div class="list-left" style="float:left; width:66%;">
          <div class="list-title">{{item.title}}</div>
          <div style="margin-top:14px;">
              <span class="list-author">{{item.author_name}}</span>
              <span class="list-date">{{item.date}}</span>
          </div>
        </div>
        <div class="list-picture"><img src="{{item.images}}" alt=""></div>
      </div>
      <div *ngIf="item.type == 2 && item.video != 1" class="border-div">
          <div class="list-title">{{item.title}}</div>
          <div class="list-picture2">
            <img src="{{pic}}" mode='widthFix' alt="" *ngFor="let pic of item.images">
          </div>
          <div style="margin-top:10px;">
              <span class="list-author">{{item.author_name}}</span>
              <span class="list-date">{{item.date}}</span>
          </div>
      </div>
      <div *ngIf="item.video == 1" class="border-div">
          <!-- preload="auto" -->
          <div class="list-title2">{{item.title}}</div>
          <video src="{{item.video_url}}" controls="true" height="210" width="100%" poster="{{item.images[0]}}" preload="auto" playsinline webkit-playsinline id='myVideo'></video> 
          <div style="margin-top:10px;">
              <span class="list-author">{{item.author_name}}</span>
              <span class="list-date">{{item.date}}</span>
          </div>
          <!-- <vg-player class="video-container">
              <vg-overlay-play></vg-overlay-play>
              <vg-buffering></vg-buffering> 
              <vg-controls *ngIf="!item.controls" [vgAutohide]="true" [vgAutohideTime]="2">
                <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
                <vg-scrub-bar>
                  <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
                  <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                </vg-scrub-bar>
                <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
                <vg-fullscreen></vg-fullscreen>
              </vg-controls>
              <video #myMedia [vgMedia]="myMedia" id="{{item.id}}" class="video-js vjs-default-skin vjs-fluid" 
              height="210" width="100%" preload="auto" 
              poster="{{item.images[0]}}"
                playsinline webkit-playsinline crossorigin>
                  <source src="{{item.video_url}}" type="video/mp4">
              </video>
          </vg-player>
          <div style="margin-top:10px;">
              <span class="list-author">{{item.author_name}}</span>
              <span class="list-date">{{item.date}}</span>
          </div> -->
        </div>
    </ion-item>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="正在加载更多数据">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
